<template>
  <div class="home">
    <el-container>
      <el-header
        class="head clear"
        :style="{ 'background-color': getColor }"
        style="height: 50px"
      >
        <h1 class="head-left">Saas平台</h1>
        <div class="head-right">
          <topBarVue class="topbar"></topBarVue>
        </div>
        <div>
          <topMetoolVue @editBack="editBack"></topMetoolVue>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" class="side">
          <leftAsideVue></leftAsideVue>
        </el-aside>
        <el-main class="main">
          <div class="topState clear">
            <span class="content-title">{{ cf || contentTitle }}</span>
            <el-button class="refbtn" size="small" @click="reload">
              <i class="el-icon-refresh-left"></i>刷新</el-button
            >
            <el-button
              @click="prevLoad"
              size="small"
              class="refbtn"
              v-if="prev"
            >
              <i class="el-icon-arrow-left"></i>
              返回
            </el-button>
          </div>
          <div class="main-content">
            <router-view v-if="isRouterRef"></router-view>
          </div>
        </el-main>
      </el-container>
      <el-container>
        <el-footer class="footer" :style="{ 'background-color': backColor }">
          <p>CopyRight @ 极优科技 2017</p></el-footer
        >
      </el-container>
    </el-container>
  </div>
</template>

<script>
import topBarVue from "@/components/bar/topBar.vue";
import topMetoolVue from "@/components/bar/topMetool.vue";
import leftAsideVue from "@/components/aside/leftAside.vue";
import { mapState, mapMutations } from "vuex";
export default {
  name: "HomeView",
  components: {
    topBarVue,
    topMetoolVue,
    leftAsideVue,
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isRouterRef: true,
      prev: false,
    };
  },
  methods: {
    ...mapMutations(["setbackColor"]),
    editBack(color) {
      this["setbackColor"](color);
    },
    reload() {
      this.isRouterRef = false;
      this.$nextTick(() => {
        this.isRouterRef = true;
      });
    },
    prevLoad() {
      this.$router.go(-1);
    },
  },
  computed: {
    ...mapState(["contentTitle", "backColor", "cf"]),
    getColor() {
      return this["backColor"];
    },
  },
  created() {
    if (
      !this.$router.currentRoute.meta.menu &&
      this.$router.currentRoute.path != "/"
    ) {
      this.prev = true;
    }
  },
  watch: {
    $route(to) {
      if (!to.meta.menu) {
        this.prev = true;
      } else {
        this.prev = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/sass/var.scss";
.home .head {
  background-color: $panel-color;
  padding: 0;
  min-width: 1200px;
  & h1 {
    text-align: center;
    color: $text-color;
  }
}
.head-left {
  float: left;
  width: 150px;
  line-height: 50px;
  font-weight: 400;
}
.head-right {
  float: left;
}
.footer {
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  z-index: 1002;
  background-color: $panel-color;
}
.topState {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: rgba(243, 243, 243, 1);
  position: sticky;
  top: 0;
  z-index: 1002;
}
.main {
  padding: 0;
  height: calc(100vh - 110px);
  & .main-content {
    padding: 30px;
    overflow-y: auto;
  }
  & .content-title {
    padding-left: 20px;
    float: left;
  }
  & .refbtn {
    float: right;
    margin-right: 40px;
    margin-top: 9px;
  }
  & .content-title::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 2px;
    height: 15px;
    background-color: $panel-color;
  }
}

p {
  font-size: 8px;
  font-family: "PingFangSC-Regular", "PingFang SC";
  color: #666666;
  text-align: center;
  height: 60px;
  line-height: 60px;
}
</style>
